<!-- 详情 -->
<template>
  <div class="drawer-layout">
    <el-drawer
      :title="detailTitle"
      :visible.sync="drawer"
      @closed="closedinvitation"
      size="85%"
      :wrapperClosable="false"
    >
      <div class="layout" style="position: relative" v-loading="loading">
        <el-tabs v-model="activeName">
          <el-tab-pane label="活动基本配置" name="first">
            <el-form
              ref="basic"
              label-position="left"
              :inline="true"
              :model="basic"
              size="small"
              :rules="basicrules"
            >
              <div class="blockquote-box">基本信息</div>
              <div class="form-box">
                <el-form-item
                  label="活动名称"
                  prop="award_name"
                  class="form-box-item"
                >
                  <el-input
                    clearable
                    maxlength="20"
                    show-word-limit
                    placeholder="请输入活动名称"
                    v-model="basic.award_name"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="活动时间"
                  prop="basicTime"
                  class="form-box-item"
                >
                  <el-date-picker
                    clearable
                    value-format="yyyy-MM-dd"
                    @change="basicTimeChange"
                    v-model="basicTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
                <!-- <el-form-item
                  label="活动状态"
                  prop="status"
                  class="form-box-item"
                >
                  <el-select v-model="basic.status" placeholder="请选择状态">
                    <el-option
                      v-for="item in status"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item> -->
              </div>
              <div class="blockquote-box">规则信息</div>
              <div class="form-box">
                <el-form-item
                  label="总抽奖限制"
                  prop="user_lottery_num"
                  class="form-box-item"
                >
                  <el-input
                    @focus="Focus(basic, 'user_lottery_num')"
                    @blur="Blur(basic, 'user_lottery_num')"
                    clearable
                    maxlength="5"
                    show-word-limit
                    placeholder="请输入用户总可抽奖限制，0为不限制"
                    v-model="basic.user_lottery_num"
                  >
                  </el-input>
                  <div class="form-tip">
                    限制用户参与活动 总-抽奖次数 0为不限制
                  </div>
                </el-form-item>
                <el-form-item
                  label="日抽奖限制"
                  prop="user_lottery_num"
                  class="form-box-item"
                >
                  <el-input
                    maxlength="5"
                    show-word-limit
                    @focus="Focus(basic, 'user_days_lottery_num')"
                    @blur="Blur(basic, 'user_days_lottery_num')"
                    clearable
                    placeholder="请输入用户日可抽奖限制，0为不限制"
                    v-model="basic.user_days_lottery_num"
                  >
                  </el-input>
                  <div class="form-tip">
                    限制用户参与活动 日-抽奖次数 0为不限制
                  </div>
                </el-form-item>
                <el-form-item
                  label="额外次数"
                  prop="extraTimes"
                  class="form-box-item"
                >
                  <!-- 额外次数：选中对应显示签到次数和会员卡次数 -->
                  <el-checkbox-group v-model="extraTimes" size="small">
                    <el-checkbox
                      label="签到渠道"
                      name="extraTimes"
                      border
                    ></el-checkbox>
                    <el-checkbox
                      label="会员卡渠道"
                      name="extraTimes"
                      border
                    ></el-checkbox>
                  </el-checkbox-group>
                  <div class="form-tip">
                    是否开放除活动外获取的<span class="tip-key">额外</span
                    >抽奖次数
                  </div>
                </el-form-item>
                <div>
                  <el-form-item
                    v-if="extraTimes.includes('签到渠道')"
                    label="签到次数"
                    prop="is_use_cart_num"
                    class="form-box-item"
                  >
                    <el-input
                      maxlength="5"
                      show-word-limit
                      clearable
                      placeholder="请输入最多可用次数"
                      v-model="basic.is_use_cart_num"
                    >
                    </el-input>
                    <div class="form-tip">
                      可<span class="tip-key">额外</span>使用签到赠送的最大次数
                    </div>
                  </el-form-item>
                  <el-form-item
                    v-if="extraTimes.includes('会员卡渠道')"
                    label="会员卡次数"
                    prop="is_use_sign_num"
                    class="form-box-item"
                  >
                    <el-input
                      maxlength="5"
                      show-word-limit
                      clearable
                      placeholder="请输入最多可用次数"
                      v-model="basic.is_use_sign_num"
                    >
                    </el-input>
                    <div class="form-tip">
                      可<span class="tip-key">额外</span
                      >使用会员卡赠送的最大次数
                    </div>
                  </el-form-item>
                </div>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button
                @click="basic_information('basic', 'second')"
                class="next-button"
                >下一步 <i class="el-icon-caret-right el-icon--right"></i
              ></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="适用范围" name="second">
            <el-form
              label-position="left"
              :inline="true"
              :model="range"
              ref="range"
              size="small"
              :rules="rangerules"
            >
              <div class="blockquote-box">适用范围</div>
              <div class="form-box">
                <el-form-item label="适用区域" class="form-box-item">
                  <el-cascader
                    filterable
                    @change="regionChangeWay"
                    v-model="range.user_area"
                    style="width: 100%"
                    :options="regionList"
                    collapse-tags
                    :props="{
                      expandTrigger: 'hover',
                      multiple: true,
                      value: 'id',
                      label: 'name',
                      children: 'children',
                      checkStrictly: false,
                      emitPath: true,
                    }"
                    clearable
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="用户分组" class="form-box-item">
                  <el-select
                    @change="selectChangeWay('user_group')"
                    v-model="range.user_group"
                    multiple
                    clearable
                    collapse-tags
                    placeholder="请选用户分组"
                  >
                    <el-option
                      v-for="item in groupingList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="用户等级" class="form-box-item">
                  <el-select
                    @change="selectChangeWay('user_level')"
                    v-model="range.user_level"
                    multiple
                    clearable
                    collapse-tags
                    placeholder="请选用户等级"
                  >
                    <el-option
                      v-for="item in gradeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="用户标签" class="form-box-item">
                  <el-select
                    clearable
                    @change="selectChangeWay('user_label')"
                    style="width: 100%"
                    v-model="range.user_label"
                    multiple
                    collapse-tags
                    placeholder="请选择标签"
                  >
                    <el-option-group
                      v-for="group in TagCategoryAll"
                      :key="group.category_name"
                      :label="group.category_name"
                    >
                      <el-option
                        v-for="item in group.child"
                        :key="item.id"
                        :label="item.tag_name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-option-group>
                  </el-select>
                </el-form-item>
              </div>
              <div class="blockquote-box">可参与活动的用户</div>
              <div class="form-box">
                <div class="table-top">
                  <div class="table-top-left">
                    <div>所有用户：{{ rangeCanJoinUsertotal }}</div>
                    <div>黑名单用户：{{ joinblackIds.length }}</div>
                    <div>重复用户：{{ rangeHasJoinUserTotal }}</div>
                  </div>
                  <div class="table-top-right">
                    <div>
                      <el-button
                        style="height: 30px"
                        type="primary"
                        @click="addConfig('黑名单')"
                        plain
                        size="small"
                        >配置黑名单</el-button
                      >
                    </div>
                    <div>
                      <el-button
                        style="height: 30px"
                        type="primary"
                        @click="addConfig('重复对象')"
                        plain
                        size="small"
                        >配置重复</el-button
                      >
                    </div>
                  </div>
                </div>
                <div>
                  <el-table
                    v-loading="rangeCanJoinUserLoading"
                    highlight-current-row
                    :data="CanJoinUserList"
                    :header-cell-style="{
                      'background-color': '#f3f8fe',
                      color: '#606266',
                      height: '50px',
                    }"
                    style="width: 100%"
                  >
                    <el-table-column
                      align="center"
                      prop="id"
                      label="用户id"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      prop="nickname"
                      label="用户昵称"
                    ></el-table-column>
                    <el-table-column
                      align="center"
                      prop="region"
                      label="用户区域"
                    >
                      <template slot-scope="scope">
                        {{
                          scope.row.province_name
                            ? scope.row.province_name
                            : "-"
                        }}
                        {{ scope.row.city_name ? scope.row.city_name : "-" }}
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="200"
                      align="center"
                      prop="group"
                      label="用户群组"
                    >
                      <template slot-scope="scope">
                        <!-- 用户群组：提示多个群组需要用分隔符区分，‘空格’+‘/’,超过三个显示超过的数量 -->
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="scope.row.group_name"
                          placement="top"
                        >
                          <div
                            v-if="scope.row.group_name"
                            style="display: flex; justify-content: center"
                          >
                            <div>{{ scope.row.group_name }}</div>
                          </div>
                        </el-tooltip>
                        <div v-if="!scope.row.group_name">-</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="200"
                      align="center"
                      prop="tag"
                      label="用户标签"
                    >
                      <template slot-scope="scope">
                        <el-tooltip
                          class="item"
                          effect="dark"
                          :content="scope.row.tag_name.join('/')"
                          placement="top"
                        >
                          <div
                            v-if="scope.row.tag_name.length !== 0"
                            style="display: flex; justify-content: center"
                          >
                            <div
                              v-if="index < 3"
                              v-for="(item, index) in scope.row.tag_name"
                              :key="index"
                            >
                              {{ item }} /
                            </div>
                            <div
                              v-if="scope.row.tag_name.length > 3"
                              class="table-num"
                            >
                              + {{ scope.row.tag_name.length }}
                            </div>
                          </div>
                        </el-tooltip>
                        <div v-if="scope.row.tag_name.length == 0">-</div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      prop="status"
                      label="参与状态"
                    ></el-table-column>
                    <el-table-column
                      fixed="right"
                      width="100"
                      prop="address"
                      label="操作"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-button type="text" @click="joinblack([scope.row])">
                          加入黑名单
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination
                    v-show="rangeCanJoinUsertotal > 0"
                    :total="rangeCanJoinUsertotal"
                    :page.sync="rangeCanJoinUserSearch.page"
                    :limit.sync="rangeCanJoinUserSearch.count"
                    @pagination="getRangeCanJoinUserListWay"
                  />
                </div>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button
                @click="activeName = 'first'"
                icon="el-icon-caret-left"
                class="next-button"
                >上一步</el-button
              >
              <el-button
                @click="basic_information('range', 'third')"
                class="next-button"
                >下一步 <i class="el-icon-caret-right el-icon--right"></i
              ></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="活动任务配置" name="third">
            <el-alert
              style="margin-bottom: 20px"
              title="说明:"
              type="warning"
              :closable="false"
            >
              1.购买商品:此类型商品是需要现金购买的商品，支付方式包含:现金、余额、现金+积分、现金+提货券、现金+积分+提货券;
              <br />2.兑换商品:此类型商品是不需要现金购买的商品，支付方式包含:
              积分、提货券、提货券+积分;
              <br />3.实名认证:仅限活动当前没有完成实名认证的用户;
            </el-alert>
            <el-form
              label-position="left"
              :model="taskForm"
              :inline="true"
              size="small"
              ref="taskForm"
              :rules="taskRules"
            >
              <div class="form-box">
                <el-form-item label="抽奖任务" required class="form-box-item">
                  <el-checkbox-group v-model="taskForm.task_type" size="small">
                    <el-checkbox :label="1">购买商品</el-checkbox>
                    <el-checkbox :label="2">兑换商品</el-checkbox>
                    <el-checkbox :label="3">完成实名认证</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
              <div v-if="taskForm.task_type.includes(1)">
                <div class="blockquote-box">购买商品规则</div>
                <div class="form-box">
                  <el-form-item
                    label="适用商品"
                    class="form-box-item"
                    :rules="
                      taskForm.task_type.includes(1)
                        ? [{ required: true, message: '请选择适用商品' }]
                        : []
                    "
                  >
                    <el-radio-group v-model="taskForm.configuration.goods_type">
                      <el-radio :label="1">全部商品</el-radio>
                      <el-radio :label="2">仅平台商品</el-radio>
                      <el-radio :label="4">指定商品</el-radio>
                    </el-radio-group>
                    <div
                      class="form-product"
                      v-if="taskForm.configuration.goods_type == 4"
                    >
                      <div>已选商品：{{ goodsIdsRow.length }}</div>
                      <el-button
                        type="text"
                        style="margin-left: 20px"
                        @click="addProductConfig('配置活动商品')"
                        >选择商品</el-button
                      >
                    </div>
                  </el-form-item>
                  <div>
                    <el-form-item
                      prop="configuration.gif_num"
                      :rules="{
                        required: true,
                        validator: quantity,
                        trigger: 'change',
                      }"
                      label="默认抽奖次数"
                      class="form-box-item"
                    >
                      <el-input
                        clearable
                        maxlength="5"
                        show-word-limit
                        v-model.trim="taskForm.configuration.gif_num"
                        placeholder="请输入默认抽奖次数"
                      >
                      </el-input>
                      <div class="form-tip">购买1个商品可获得的次数</div>
                    </el-form-item>
                    <el-form-item
                      prop="configuration.total_num"
                      :rules="{
                        required: true,
                        validator: quantity,
                        trigger: 'change',
                      }"
                      label="默认限购数量"
                      class="form-box-item"
                    >
                      <el-input
                        clearable
                        maxlength="5"
                        show-word-limit
                        v-model.trim="taskForm.configuration.total_num"
                        placeholder="请输入默认限购数量"
                      >
                      </el-input>
                      <div class="form-tip">
                        每个用户可购买的商品数量，0为不限制
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </div>
              <div v-if="taskForm.task_type.includes(2)">
                <div class="blockquote-box">兑换商品规则</div>
                <div class="form-box">
                  <el-form-item required label="适用商品" class="form-box-item">
                    <el-radio-group v-model="taskForm.exchange.goods_type">
                      <el-radio :label="1">全部商品</el-radio>
                      <el-radio :label="4">指定商品</el-radio>
                    </el-radio-group>
                    <div
                      class="form-product"
                      v-if="taskForm.exchange.goods_type == 4"
                    >
                      <div>已选商品：{{ exchangegoodsIds.length }}</div>
                      <el-button
                        type="text"
                        style="margin-left: 20px"
                        @click="addProductConfigs('配置活动商品')"
                        >选择商品</el-button
                      >
                    </div>
                  </el-form-item>
                  <div>
                    <el-form-item
                      prop="exchange.gif_num"
                      :rules="{
                        required: true,
                        validator: quantity,
                        trigger: 'change',
                      }"
                      label="默认抽奖次数"
                      class="form-box-item"
                    >
                      <el-input
                        clearable
                        maxlength="5"
                        show-word-limit
                        placeholder="请输入默认抽奖次数"
                        v-model="taskForm.exchange.gif_num"
                      >
                      </el-input>
                      <div class="form-tip">兑换1个商品可获得的次数</div>
                    </el-form-item>
                    <el-form-item
                      prop="exchange.total_num"
                      :rules="{
                        required: true,
                        validator: quantity,
                        trigger: 'change',
                      }"
                      label="默认兑换限制"
                      class="form-box-item"
                    >
                      <el-input
                        clearable
                        maxlength="5"
                        show-word-limit
                        placeholder="请输入默认兑换限制"
                        v-model="taskForm.exchange.total_num"
                      >
                      </el-input>
                      <div class="form-tip">
                        每个用户可兑换的商品数量，0为不限制
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </div>
              <div v-if="taskForm.task_type.includes(3)">
                <div class="blockquote-box">完成实名认证规则</div>
                <div class="form-box">
                  <el-form-item
                    prop="raffle.gif_num"
                    :rules="{
                      required: true,
                      validator: quantity,
                      trigger: 'change',
                    }"
                    label="默认抽奖次数"
                    class="form-box-item"
                  >
                    <el-input
                      clearable
                      maxlength="5"
                      show-word-limit
                      placeholder="请输入默认抽奖次数"
                      v-model="taskForm.raffle.gif_num"
                    >
                    </el-input>
                    <div class="form-tip">完成实名认证可获得的次数</div>
                  </el-form-item>
                </div>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button
                @click="activeName = 'third'"
                icon="el-icon-caret-left"
                class="next-button"
                >上一步</el-button
              >
              <el-button
                @click="basic_information('configuration', 'fourth')"
                class="next-button"
                >下一步 <i class="el-icon-caret-right el-icon--right"></i
              ></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="奖池配置" name="fourth">
            <el-form
              label-position="left"
              :inline="true"
              :model="awardSet"
              size="small"
              :rules="awardSetrules"
            >
              <div class="blockquote-box">奖池配置</div>
              <div class="form-box">
                <div>
                  <el-form-item label="转盘设置" class="form-box-item">
                    <el-radio-group v-model="awardSet.dial_type">
                      <el-radio :label="4">四个转盘</el-radio>
                      <el-radio :label="6">六个转盘</el-radio>
                      <el-radio :label="8">八个转盘</el-radio>
                      <el-radio :label="10">十个转盘</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="奖池设置" class="form-box-item">
                    <el-radio-group
                      @click="changeAward_set"
                      v-model="awardSet.award_set"
                    >
                      <el-radio :label="1">默认奖池</el-radio>
                      <el-radio :label="2">自定义奖池</el-radio>
                    </el-radio-group>
                    <div class="Instructions">
                      <div>说明:</div>
                      <div>
                        1.默认奖池:此类型是指活动信息中添加的适用对象，所有对象统一使用一个奖品池，即同一个抽奖转盘;
                      </div>
                      <div>
                        2.自定义奖池:此类型是指活动信息中添加的适用对象，根据适用对象不同的消费次数、消费金额设置不同的奖品池和抽奖转盘;
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </div>
              <div v-if="awardSet.award_set == 2" class="blockquote-box">
                奖池条件配置
              </div>
              <div
                class="form-box"
                v-for="(item, index) in awardSet.award_rule"
                :key="index"
              >
                <div v-if="awardSet.award_set == 2 && index < 1">
                  <el-form-item required label="配置条件" class="form-box-item">
                    <el-button
                      type="primary"
                      style="height: 30px"
                      @click="addwardConfig('配置奖池商品', item)"
                      >配置指定商品<span v-if="awardIds.length != 0"
                        >({{ awardIds.length }})</span
                      ></el-button
                    >
                  </el-form-item>
                </div>
                <div>
                  <el-form-item
                    label="奖池条件"
                    required
                    class="form-box-item"
                    v-if="awardSet.award_set == 2"
                  >
                    <el-input
                      clearable
                      maxlength="7"
                      show-word-limit
                      onkeyup="value=value.replace(/\D/g,'')"
                      v-model="item.min_price"
                      placeholder="请输入最低消费区间"
                      style="width: 150px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="-"
                    label-width="30px"
                    class="form-box-item"
                    v-if="awardSet.award_set == 2"
                  >
                    <el-input
                      clearable
                      maxlength="7"
                      show-word-limit
                      onkeyup="value=value.replace(/\D/g,'')"
                      v-model="item.max_price"
                      placeholder="请输入最高消费区间"
                      style="width: 150px"
                    ></el-input>
                  </el-form-item>

                  <el-form-item label="奖品设置" required class="form-box-item">
                    <el-button type="text" @click="addAward(item)"
                      >添加奖品</el-button
                    >
                    <span style="margin-left: 10px"
                      >( {{ item.awardProduct.length }} /
                      {{ awardSet.dial_type }}
                      )</span
                    >
                  </el-form-item>
                  <el-form-item
                    v-if="awardSet.award_set == 2"
                    label="配置多个区间"
                    class="form-box-item"
                  >
                    <el-button
                      v-if="index == awardSet.award_rule.length - 1"
                      @click="pushAward_rule"
                      type="primary"
                      icon="el-icon-plus"
                      circle
                    ></el-button>
                    <el-button
                      v-if="awardSet.award_rule.length > 1"
                      type="danger"
                      @click="delAward_rule(item)"
                      icon="el-icon-minus"
                      circle
                    ></el-button>
                  </el-form-item>
                  <div style="margin-bottom: 30px">
                    <el-table
                      v-loading="awardLoading"
                      highlight-current-row
                      :data="item.awardProduct"
                      :header-cell-style="{
                        'background-color': '#f3f8fe',
                        color: '#606266',
                        height: '50px',
                      }"
                      style="width: 100%"
                    >
                      <el-table-column
                        align="center"
                        prop="rule_name"
                        label="奖品名称"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="award_type"
                        label="奖品类型"
                      >
                        <template slot-scope="scope">
                          <el-tag size="mini" v-if="scope.row.award_type == 1"
                            >积分</el-tag
                          >
                          <el-tag size="mini" v-if="scope.row.award_type == 2"
                            >提货券</el-tag
                          >
                          <el-tag size="mini" v-if="scope.row.award_type == 3"
                            >积分转化卡</el-tag
                          >
                          <el-tag size="mini" v-if="scope.row.award_type == 99"
                            >未中奖</el-tag
                          >
                        </template>
                      </el-table-column>
                      <el-table-column
                        align="center"
                        prop="image"
                        label="奖品图片"
                      >
                        <template slot-scope="scope">
                          <el-image
                            :src="scope.row.image"
                            style="width: 50px; height: 50px"
                          />
                        </template>
                      </el-table-column>
                      <el-table-column
                        align="center"
                        prop="rule_rate"
                        label="中奖概率"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="num"
                        label="发放数量"
                      ></el-table-column>

                      <el-table-column
                        align="center"
                        prop="rule_inventory"
                        label="奖品总数"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="today_award_num"
                        label="人/总中奖次数"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="award_sum_num"
                        label="人/日中奖次数"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="sort"
                        label="排序"
                      ></el-table-column>
                      <el-table-column
                        fixed="right"
                        width="100"
                        prop="address"
                        label="操作"
                        align="center"
                      >
                        <template slot-scope="scope">
                          <el-button
                            type="text"
                            @click="editAward(item, scope.row)"
                          >
                            编辑
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button
                @click="activeName = 'second'"
                icon="el-icon-caret-left"
                class="next-button"
                >上一步</el-button
              >
              <el-button
                @click="basic_information('awardSet', 'fifth')"
                class="next-button"
                >下一步 <i class="el-icon-caret-right el-icon--right"></i
              ></el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="活动说明" name="fifth">
            <el-form label-position="left" :inline="true" size="small">
              <div class="blockquote-box">活动说明</div>
              <div class="form-box">
                <el-form-item label="活动说明" required class="form-box-item">
                  <editor-text
                    v-model="explain"
                    :height="240"
                    @input="editorclick"
                  />
                </el-form-item>
              </div>
            </el-form>
            <el-divider></el-divider>
            <div class="button-box">
              <el-button
                @click="activeName = 'fourth'"
                icon="el-icon-caret-left"
                class="next-button"
                >上一步</el-button
              >
              <el-button class="next-button" @click="saveSubmit"
                >保存</el-button
              >
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>

    <!-- 配置抽屉 -->
    <config
      ref="config"
      v-if="ifShowConfig"
      :userIds="userIds"
      :regionList="regionList"
      :groupingList="groupingList"
      :TagCategoryAll="TagCategoryAll"
      :gradeList="gradeList"
      :ConfigTitle="ConfigTitle"
    />
    <!-- 已选商品抽屉 -->
    <productConfig
      v-if="ifShowProductConfig"
      :goodsType="goodsType"
      :goodsIdArr="dataIds"
      :goodsIdsRowList="goodsIdsRowList"
      :configuration="{
        total_num: total_num,
        gif_num: gif_num,
      }"
      :productConfigTitle="productConfigTitle"
    ></productConfig>

    <el-dialog
      :title="dialogtitle"
      :visible.sync="dialogFormVisible"
      @before-close="dialogFormVisibleClose"
    >
      <div>
        <el-form
          :model="awardform"
          :rules="awardSetrules"
          label-width="120px"
          ref="awardform"
        >
          <el-form-item prop="rule_name" label="奖品名称" class="form-box-item">
            <el-input clearable v-model="awardform.rule_name"></el-input>
          </el-form-item>
          <el-form-item
            prop="award_type"
            label="奖品类型"
            class="form-box-item"
          >
            <el-radio-group v-model="awardform.award_type">
              <el-radio :label="1">积分</el-radio>
              <el-radio :label="2">提货券</el-radio>
              <el-radio :label="3">积分转化卡</el-radio>
              <el-radio :label="99">未中奖</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            prop="num"
            label="赠送数量"
            :rules="{
              required: true,
              validator: quantity,
              trigger: 'change',
            }"
            class="form-box-item"
          >
            <el-input clearable v-model="awardform.num"></el-input>
            <span style="color: #ff4949;margin-left: 10px;">用户中奖获得的数量</span>
          </el-form-item>
          <el-form-item
            prop="rule_inventory"
            :rules="{
              required: true,
              validator: quantity,
              trigger: 'change',
            }"
            label="奖品总量"
            class="form-box-item"
          >
            <el-input clearable v-model="awardform.rule_inventory"></el-input>
            <span style="color: #ff4949;margin-left: 10px;">所有参与用户可抽中的总次数</span>
          </el-form-item>
          <el-form-item
            prop="rule_rate"
            :rules="{
              required: true,
              validator: quantity,
              trigger: 'change',
            }"
            label="中奖概率"
            class="form-box-item"
          >
            <el-input clearable v-model="awardform.rule_rate"></el-input>
          </el-form-item>
          <el-form-item
            prop="today_award_num"
            :rules="{
              required: true,
              validator: quantity,
              trigger: 'change',
            }"
            label="每日中奖次数"
            class="form-box-item"
          >
            <el-input clearable v-model="awardform.today_award_num"></el-input>
           <span style="color: #ff4949;margin-left: 10px;">单个用户每天可抽中的总次数</span>
          </el-form-item>
          <el-form-item
            prop="award_sum_num"
            :rules="{
              required: true,
              validator: quantity,
              trigger: 'change',
            }"
            label="总中奖次数"
            class="form-box-item"
          >
            <el-input clearable v-model="awardform.award_sum_num"></el-input>
            <span style="color: #ff4949;margin-left: 10px;">单个用户在活动期间可抽中的总次数</span>
          </el-form-item>
          <el-form-item
            prop="sort"
            :rules="{
              required: true,
              validator: quantity,
              trigger: 'change',
            }"
            label="排序"
            class="form-box-item"
          >
            <el-input clearable v-model="awardform.sort"></el-input>
          </el-form-item>

          <el-form-item label="商品主图" class="form-box-item" prop="image">
            <!-- pr -->
            <logo-upload
              :single-file="awardformimages"
              :show-file-list="false"
              accept="image/jpeg, image/png"
              @uploadCallback="awardformimagesBack"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="awardSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// 引入
import config from "./config";
import productConfig from "./productConfig";
import LogoUpload from "@/components/FileUpload";
import { rangeCanJoinUserList } from "@/api/index";
import { NewSaveAward, getAwardInfo } from "@/api/activity/index";
export default {
  name: "detail",
  props: [
    "detailTitle",
    "status",
    "regionList",
    "groupingList",
    "TagCategoryAll",
    "gradeList",
  ],
  components: {
    config,
    productConfig,
    LogoUpload,
  },
  watch: {
    activeName: {
      handler(oldVal, newVal) {
        this.explainBool = true;
        this.getRangeCanJoinUserListWay();
      },
      deep: true,
    },
  },
  data() {
    return {
      loading: false,
      id: "",
      drawer: true,
      detailtitle: "",
      activeName: "first",
      // 基本信息
      basic: {
        award_name: "", // 抽奖活动名称
        start_time: "", // 开启时间
        end_time: "", // 结束时间
        user_lottery_num: 0, // 每人抽奖总次数 不填就是不限制
        user_days_lottery_num: 0, // 没人每天抽奖总次数 不填就是不限制
        is_use_cart_num: "", // 0不可使用会员卡赠送次数 >0可使用次数
        is_use_sign_num: "", // 0不可使用签到赠送次数 >0可使用次数
      },
      // 基本信息时间段
      basicTime: [],
      // 基本信息额外抽奖次数
      extraTimes: [],
      // 校验基本信息
      basicrules: {
        award_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (!value) {
                callback(new Error("请输入活动名称"));
              } else {
                if (req.test(value)) {
                  callback(new Error("活动名称中不能存在特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          },
        ],
        basicTime: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.basicTime.length == 0) {
                return callback(new Error("请选择活动的时间段"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        status: [
          {
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          },
        ],
        user_lottery_num: [
          {
            required: false,
            validator: (rule, value, callback) => {
              let req = /\D/g;
              if (value == "" || value == 0) {
                return callback();
              }
              if (req.test(value)) {
                callback(new Error("只能为数字,且只能为整数"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        is_use_cart_num: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.extraTimes.includes("签到渠道")) {
                let req = /\D/g;
                if (value === "") {
                  callback(new Error("请输入额外签到次数"));
                } else {
                  if (req.test(value)) {
                    callback(new Error("额外签到次数只能为数字,且只能为整数"));
                  } else {
                    callback();
                  }
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        is_use_sign_num: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.extraTimes.includes("会员卡渠道")) {
                let req = /\D/g;
                if (value === "") {
                  callback(new Error("请输入额外会员卡次数"));
                } else {
                  if (req.test(value)) {
                    callback(
                      new Error("额外会员卡次数只能为数字,且只能为整数")
                    );
                  } else {
                    callback();
                  }
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      // 适用范围搜索参数
      range: {
        user_area: [],
        user_group: [],
        user_label: [],
        user_level: [],
        user_black: [], // 黑名单用户id
      },
      // 校验
      rangerules: {},
      // 满足条件的可参与用户列表
      CanJoinUserList: [],
      rangeCanJoinUserLoading: false, // 使用范围使用用户列表
      rangeCanJoinUsertotal: 0, // 使用范围使用用户列表总条数
      // 获取重复参与活动用户列表
      rangeCanJoinUserSearch: {
        activity_type: 10001, // 活动类型：1=爱心助农;；2=秒杀；3=拼团；4=消费3天全返；5=送积分；6=积分转化提货券；7=好物推荐；8=邀请有礼；10001=抽奖
        remove_activity_id: "", // 需要排除的活动ID（修改活动，需要传当前活动ID）
        appoint_area_select: "", // 选择的地区ID（市ID，多个以,分开）
        appoint_level_select: "", // 选择的用户等级ID（多个以,分开）
        appoint_group_select: "", // 选择的用户分组ID（多个以,分开）
        appoint_tag_select: "", // 选择的用户标签ID（多个以,分开）
        user_black: "", // 黑名单用户ID（多个以,分开）
        page: 1,
        count: 10,
      },
      HasJoinUserList: [], // 重复用户列表
      rangeHasJoinUserTotal: 0, // 重复用户数
      joinblackIds: [], // 黑名单id列表
      ifShowConfig: false, // 控制配置黑名单重复抽屉显示隐藏
      userIds: [], // 向配置黑名单重复抽屉传递的参数
      ConfigTitle: "", // 配置黑名单重复抽屉标题的参数
      // 活动任务配置

      taskForm: {
        task_type: [1, 2, 3],
        configuration: {
          task_type: [],
          goods_type: 1,
          goods_type_ids: [],
          gif_num: 1, //购买1个商品可获得的次数
          total_num: 1, //每个用户可购买的商品数量，0为不限制
        },
        exchange: {
          task_type: [],
          goods_type: 1,
          goods_type_ids: [],
          gif_num: 1, //购买1个商品可获得的次数
          total_num: 1, //每个用户可购买的商品数量，0为不限制
        },
        gif_num: 1, //购买1个商品可获得的次数
        total_num: 1, //每个用户可购买的商品数量，0为不限制
        raffle: {
          gif_num: 1, //购买1个商品可获得的次数
          goods_type: 0,
          goods_type_ids: [],
          total_num: 0, //每个用户可购买的商品数量，0为不限制
        },
      },

      //活动任务配置参数校验
      taskRules: {
        num: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /\D/g;
              if (value == "" || value == 0) {
                return callback(new Error("请输入..."));
              } else {
                callback();
              }
              if (req.test(value)) {
                callback(new Error("只能为数字,且只能为整数"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      productConfigTitle: "", // 已选商品库标题
      ifShowProductConfig: false, // 已选商品库弹框
      goodsType: "购买商品",

      // 暂存
      dataIds: [],
      goodsIdsRowList: [],
      goodsIdsRow: [],
      goodsIds: [],
      // 兑换商品
      exchangegoodsIds: [],
      exchangegoodsIdsRow: [],
      // 奖池配置
      awardSet: {
        id: 0,
        dial_type: 8,
        award_set: 1,
        consume_limit: 1,
        consume_limit_goods: "",
        due_day: "",
        award_rule: [
          {
            id: 0,
            min_price: "",
            max_price: "",
            awardProduct: [],
          },
        ],
      },
      awardLoading: false,
      awardform: {
        uid: 0,
        id: 0,
        min_price: 0,
        max_price: 0,
        rule_name: "",
        image: "",
        award_type: 1,
        num: "",
        rule_inventory: "",
        rule_rate: "",
        sort: "",
        award_sum_num: "",
        today_award_num: "",
      },
      awardformimages: {},
      number_of_prizes: [
        {
          required: true,
          validator: (rule, value, callback) => {
            // let req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
            // if (!value) {
            //   callback(new Error("请输入名称"));
            // } else {
            //   if (req.test(value)) {
            //     callback(new Error("名称中不能存在特殊字符"));
            //   } else {
            //     callback();
            //   }
            // }
          },
          trigger: "change",
        },
      ],
      // 奖池配置校验
      awardSetrules: {
        rule_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              let req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (!value) {
                callback(new Error("请输入名称"));
              }else{
                callback();
              }
            },
            trigger: "change",
          },
        ],
        award_type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          },
        ],
        image: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!this.awardform.image) {
                callback(new Error("请上传图片"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      dialogFormVisible: false,
      dialogtitle: "",
      // 当前操作的row
      awardProductRow: {},
      quantity: (rule, value, callback) => {
        let req = /\D/g;
        if (value == "") {
          callback(new Error("请输入内容"));
        } else {
          if (req.test(value)) {
            callback(new Error("只能是数字,且只能为整数"));
          } else {
            if (rule.field.search("rule_rate") !== -1) {
              if (Number(value) > 100 || Number(value) < 0) {
                callback(new Error("概率区间不得大于100,小于0"));
              } else {
                callback();
              }
            } else if (rule.field == "num") {
              if (Number(value) > 100 || Number(value) < 0) {
                callback(new Error("比例范围不得大于100,小于0"));
              } else {
                callback();
              }
            } else {
              callback();
            }
          }
        }
      },

      awardIds: [],
      awardIdsRow: [],
      // 活动说明
      explain: "",
      explainBool: false,
    };
  },
  mounted() {},
  methods: {
    getAwardInfoWay(row) {
      this.loading = true;
      this.id = row.id;
      getAwardInfo({ id: row.id }).then((res) => {
        this.loading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        var obj = res.data;
        this.basic.award_name = obj.award_name;
        this.basic.start_time = obj.start_time;
        this.basic.end_time = obj.end_time;
        this.basicTime = [obj.start_time, obj.end_time];
        this.basic.user_lottery_num = obj.user_lottery_num;
        this.basic.user_days_lottery_num = obj.user_days_lottery_num;
        this.basic.is_use_cart_num = obj.is_use_cart_num;
        this.extraTimes = [];
        if (obj.is_use_cart_num !== 0 && obj.is_use_cart_num) {
          this.extraTimes.push("签到渠道");
        }
        this.basic.is_use_sign_num = obj.is_use_sign_num;
        if (obj.is_use_sign_num !== 0 && obj.is_use_sign_num) {
          this.extraTimes.push("会员卡渠道");
        }

        this.range.user_area = obj.userConfig.user_area;
        if (obj.userConfig.user_group == "") {
          this.range.user_group = [];
        } else {
          let numArr = [];
          obj.userConfig.user_group.split(",").forEach((item) => {
            numArr.push(Number(item));
          });
          this.range.user_group = numArr;
        }
        if (obj.userConfig.user_label == "") {
          this.range.user_label = [];
        } else {
          let numArr = [];
          obj.userConfig.user_label.split(",").forEach((item) => {
            numArr.push(Number(item));
          });
          this.range.user_label = numArr;
        }
        if (obj.userConfig.user_level == "") {
          this.range.user_level = [];
        } else {
          let numArr = [];
          obj.userConfig.user_black.split(",").forEach((item) => {
            numArr.push(Number(item));
          });
          this.range.user_level = numArr;
        }
        this.range.user_black = obj.userConfig.user_black;
        this.joinblackIds = obj.userConfig.user_black;
        this.regionChangeWay(obj.userConfig.user_area);
        this.rangeCanJoinUserSearch.appoint_group_select =
          obj.userConfig.user_group;
        this.rangeCanJoinUserSearch.appoint_tag_select =
          obj.userConfig.user_label;
        this.rangeCanJoinUserSearch.appoint_level_select =
          obj.userConfig.user_level;
        this.rangeCanJoinUserSearch.user_black =
          obj.userConfig.user_black.toString();
        this.$nextTick(() => {
          this.getRangeCanJoinUserListWay();
        });

        this.taskForm.task_type = [];
        obj.awardTask.forEach((item) => {
          if (item.task_type === 1) {
            this.taskForm.task_type.push(1);
            this.taskForm.configuration.task_type = 1;
            this.taskForm.configuration.goods_type = item.goods_type;
            this.taskForm.configuration.gif_num = item.gif_num;
            this.taskForm.configuration.total_num = item.total_num;
            this.goodsIdsRow = [];
            this.goodsIds = [];
            if (item.goods_type_ids.length !== 0) {
              item.goods_type_ids.forEach((items) => {
                this.goodsIds.push(items.goods_id);
                this.goodsIdsRow.push({
                  id: items.goods_id,
                  gif_num: items.gif_num,
                  total_num: items.total_num,
                });
              });
            }
          } else if (item.task_type === 2) {
            this.taskForm.task_type.push(2);
            this.taskForm.exchange.task_type = 2;
            this.taskForm.exchange.goods_type = item.goods_type;
            this.taskForm.exchange.gif_num = item.gif_num;
            this.taskForm.exchange.total_num = item.total_num;
            this.exchangegoodsIdsRow = [];
            this.exchangegoodsIds = [];
            if (item.goods_type_ids.length !== 0) {
              item.goods_type_ids.forEach((items) => {
                this.exchangegoodsIds.push(items.goods_id);
                this.exchangegoodsIdsRow.push({
                  id: items.goods_id,
                  gif_num: items.gif_num,
                  total_num: items.total_num,
                });
              });
            }
          } else if (item.task_type === 3) {
            this.taskForm.task_type.push(3);
            this.taskForm.raffle.task_type = 3;
            this.taskForm.raffle.goods_type = item.goods_type;
            this.taskForm.raffle.gif_num = item.gif_num;
            this.taskForm.raffle.total_num = item.total_num;
          }
        });

        this.awardSet.id = obj.awardSet.id;
        this.awardSet.dial_type = obj.awardSet.dial_type;
        this.awardSet.award_set = obj.awardSet.award_set;
        this.awardSet.consume_limit = obj.awardSet.consume_limit;
        this.awardSet.consume_limit_goods = obj.awardSet.consume_limit_goods;
        let arrconsume = obj.awardSet.consume_limit_goods.split(",");
        this.awardIds = [];
        this.awardIdsRow = [];
        arrconsume.forEach((item) => {
          this.awardIds.push(Number(item));
          this.awardIdsRow.push({
            id: Number(item),
          });
        });
        let award_rule = [];

        obj.awardSet.award_rule.forEach((item, index) => {
          award_rule.push({
            id: index,
            min_price: item[0].min_price,
            max_price: item[0].max_price,
            awardProduct: [...item],
          });
        });
        this.awardSet.award_rule = award_rule;
        this.explain = obj.explain;
        this.$nextTick(() => {
          this.loading = false;
        });
      });
    },
    // 基本信息点击下一步调用
    basic_information(formName, activeName) {
      this.activeName = activeName;
    },
    // 选择活动日期之后直接赋值
    basicTimeChange(val) {
      if (val.length !== 0) {
        this.basic.start_time = val[0];
        this.basic.end_time = val[1];
      } else {
        this.basic.start_time = "";
        this.basic.end_time = "";
      }
    },
    // 文本框聚焦执行
    Focus(item, str) {
      if (item[str] == 0) {
        item[str] = "";
      }
      this.$forceUpdate();
    },
    // 文本框失焦执行
    Blur(item, str) {
      if (item[str] == "") {
        item[str] = 0;
        return;
      }
      if (Number(item[str])) {
        item[str] = Number(item[str]);
      }
      this.$forceUpdate();
    },
    // 获取可参与列表
    getRangeCanJoinUserListWay() {
      this.rangeCanJoinUserLoading = true;
      rangeCanJoinUserList(this.rangeCanJoinUserSearch).then((res) => {
        this.rangeCanJoinUserLoading = false;
        this.loading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.CanJoinUserList = res.data.list;
        this.rangeCanJoinUsertotal = res.data.total;
      });
    },
    // 下拉框选择调用
    selectChangeWay(name) {
      if (name == "user_group") {
        this.rangeCanJoinUserSearch.appoint_group_select =
          this.range[name].toString();
      } else if (name == "user_level") {
        this.rangeCanJoinUserSearch.appoint_level_select =
          this.range[name].toString();
      } else if (name == "user_label") {
        this.rangeCanJoinUserSearch.appoint_tag_select =
          this.range[name].toString();
      }
      this.getRangeCanJoinUserListWay();
    },
    // 选择区域调用
    regionChangeWay(val) {
      var arr = [];
      val.forEach((item) => {
        arr.push(item[1]);
      });
      this.rangeCanJoinUserSearch.appoint_area_select = arr.toString();
      this.getRangeCanJoinUserListWay();
    },
    //加入黑名单
    joinblack(row) {
      this.$confirm("确定要将用户添加到黑名单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (row.length !== 0) {
            row.forEach((item) => {
              this.joinblackIds.push(item.id);
            });
          }
          this.rangeCanJoinUserSearch.user_black = this.joinblackIds.toString();
          this.getRangeCanJoinUserListWay();
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          this.userIds = this.joinblackIds;
          this.$refs.config.getList(this.joinblackIds);
        })
        .catch(() => {});
    },
    // 移除黑名单
    removeBlacklist(row) {
      var _this = this;
      _this
        .$confirm("确定要将用户移出黑名单吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          var arr = [];
          if (row.length !== 0) {
            row.forEach((item) => {
              arr.push(item.id);
            });
          } else {
            arr = [];
          }
          _this.joinblackIds = _this.getArrDifference(arr, _this.joinblackIds);
          _this.rangeCanJoinUserSearch.user_black =
            _this.joinblackIds.toString();
          _this.getRangeCanJoinUserListWay();
          _this.$message({
            type: "success",
            message: "移出成功!",
          });
          _this.userIds = _this.joinblackIds;
          _this.$refs.config.getList(_this.joinblackIds);
        })
        .catch(() => {});
    },
    getArrDifference(arr1, arr2) {
      return arr1.concat(arr2).filter(function (v, i, arr) {
        return arr.indexOf(v) === arr.lastIndexOf(v);
      });
    },
    // 关闭添加抽屉
    closedinvitation() {
      this.$parent.closedetail();
    },
    //打开配置黑名单重复抽屉
    addConfig(title) {
      this.ifShowConfig = true;
      this.$nextTick(() => {
        if (title == "黑名单") {
          this.userIds = this.joinblackIds;
        } else if (title == "重复对象") {
          this.userIds = this.joinblackIds;
        }
        this.ConfigTitle = title;
      });
    },
    // 关闭配置黑名单重复抽屉
    closeConfig() {
      this.ifShowConfig = false;
      this.ifShowProductConfig = false;
    },

    // 活动任务配置函数方法
    // 打开已选商品弹出框
    addProductConfig(title) {
      this.goodsType = "购买商品";
      this.dataIds = this.goodsIds;
      this.goodsIdsRowList = this.goodsIdsRow;
      this.productConfigTitle = title;
      this.total_num = this.taskForm.configuration.total_num;
      this.gif_num = this.taskForm.configuration.gif_num;
      this.ifShowProductConfig = true;
    },
    addProductConfigs(title) {
      this.dataIds = this.exchangegoodsIds;
      this.goodsIdsRowList = this.exchangegoodsIdsRow;
      this.goodsType = "兑换商品";
      this.productConfigTitle = title;
      this.total_num = this.taskForm.exchange.total_num;
      this.gif_num = this.taskForm.exchange.gif_num;
      this.ifShowProductConfig = true;
    },
    // 购买商品
    goodsIdsRowWay(row) {
      this.goodsIdsRow = row;
    },
    // 购买商品
    goodsIdsWay(row) {
      this.goodsIds = row;
    },
    // 兑换商品
    exchangegoodsIdsRowWay(row) {
      this.exchangegoodsIdsRow = row;
    },
    // 兑换商品
    exchangegoodsIdsWay(row) {
      this.exchangegoodsIds = row;
    },
    // 切换奖池设置
    changeAward_set(val) {
      if (val == 2) {
        this.awardSet.consume_limit = 2;
        this.awardSet.consume_limit_goods = "";
      } else {
        this.awardSet.consume_limit = 1;
        this.awardSet.consume_limit_goods = "";
      }
    },
    dialogFormVisibleClose(done) {
      this.refs.awardform.resetFields();
      done();
    },
    // 添加奖品
    addAward(row) {
      if (row.awardProduct.length >= this.awardSet.dial_type) {
        return this.$messages.error(
          "最大奖品数量不能超过" + this.awardSet.dial_type + "个"
        );
      }
      this.awardProductRow = row;
      this.awardform.uid = new Date().getTime();
      this.dialogFormVisible = true;
      this.dialogtitle = "添加奖品";
    },
    awardformimagesBack(file) {
      this.awardform.image = file.url;
      this.awardformimages = file;
    },
    editAward(item, row) {
      var obj = JSON.parse(JSON.stringify(row));
      this.awardProductRow = JSON.parse(JSON.stringify(item));
      this.awardform.uid = obj.uid;
      this.awardform.id = obj.id;
      this.awardform.rule_name = obj.rule_name;
      this.awardform.award_type = obj.award_type;
      this.awardform.num = obj.num;
      this.awardform.rule_inventory = obj.rule_inventory;
      this.awardform.rule_rate = obj.rule_rate;
      this.awardform.today_award_num = obj.today_award_num;
      this.awardform.award_sum_num = obj.award_sum_num;
      this.awardform.sort = obj.sort;
      this.awardformimagesBack({ url: obj.image });
      this.dialogFormVisible = true;
      this.dialogtitle = "奖品详情";
    },
    awardSubmit() {
      this.$refs.awardform.validate((valid) => {
        if (valid) {
          var obj = JSON.parse(JSON.stringify(this.awardform));
          var arr = this.awardProductRow.awardProduct;
          if (this.dialogtitle != "奖品详情") {
            this.awardProductRow.awardProduct.push(obj);
            this.awardSet.award_rule.forEach((item) => {
              if (item.id == this.awardProductRow.id) {
                item = this.awardProductRow;
              }
            });
          } else {
            arr.forEach((item) => {
              if (item.uid == this.awardform.uid) {
                item.uid = obj.uid;
                item.sort = obj.sort;
                item.award_sum_num = obj.award_sum_num;
                item.today_award_num = obj.today_award_num;
                item.rule_rate = obj.rule_rate;
                item.rule_inventory = obj.rule_inventory;
                item.award_type = obj.award_type;
                item.num = obj.num;
                item.rule_name = obj.rule_name;
                item.id = obj.id;
                item.uid = obj.uid;
                item.image = obj.image;
              }
            });
            this.awardProductRow.awardProduct = arr;
            this.awardSet.award_rule.forEach((item) => {
              if (item.id == this.awardProductRow.id) {
                item.awardProduct = this.awardProductRow.awardProduct;
              }
            });
          }
          this.$nextTick(() => {
            this.awardformimages = {};
            this.awardProductRow = {};
            this.$refs.awardform.resetFields();
            this.dialogFormVisible = false;
          });
        } else {
          return false;
        }
      });
    },
    pushAward_rule() {
      this.awardSet.award_rule.push({
        id: this.awardSet.award_rule.length + new Date().getTime(),
        min_price: "",
        max_price: "",
        awardProduct: [],
      });
    },
    delAward_rule(row) {
      var arr = [];
      this.awardSet.award_rule.forEach((item) => {
        if (item.id !== row.id) {
          arr.push(item);
        }
      });
      this.awardSet.award_rule = arr;
    },
    addwardConfig(title, item) {
      this.goodsType = "全部";
      this.dataIds = this.awardIds;
      this.goodsIdsRowList = this.awardIdsRow;
      this.productConfigTitle = title;
      this.ifShowProductConfig = true;
    },
    // 奖池商品
    addwardIdsRowWay(row) {
      this.awardIdsRow = row;
    },
    // 奖池商品
    addwardIdsWay(row) {
      this.awardIds = row;
    },
    // 提交按钮
    saveSubmit() {
      const p1 = new Promise((resolve, reject) => {
        this.$refs.basic.validate((valid, error) => {
          if (valid) {
            resolve();
          } else {
            reject({
              error: error,
              name: "first",
            });
            return;
          }
        });
      });
      const p2 = new Promise((resolve, reject) => {
        this.$refs.range.validate((valid, error) => {
          if (valid) {
            resolve();
          } else {
            this.activeName = "second";
            reject({
              error: error,
              name: "second",
            });
            return;
          }
        });
      });
      const p3 = new Promise((resolve, reject) => {
        this.$refs.taskForm.validate((valid, error) => {
          if (valid) {
            resolve();
          } else {
            reject({
              error: error,
              name: "third",
            });
            return;
          }
        });
      });
      const p4 = new Promise((resolve, reject) => {
        var num = 0;
        if (this.awardSet.award_set == 1) {
          this.awardSet.award_rule.some((item) => {
            if (item.awardProduct.length < this.awardSet.dial_type) {
              this.$messages.error(
                "当前配置奖品数量不足" + this.awardSet.dial_type + "个"
              );
              num++;
              this.activeName = "fourth";
              reject(false);
              return true;
            }
            if (item.awardProduct.length > this.awardSet.dial_type) {
              this.$messages.error(
                "当前奖品数量不得大于" + this.awardSet.dial_type + "个"
              );
              num++;
              reject(false);
              return true;
            }
          });
        } else {
          this.awardSet.award_rule.some((item, index) => {
            if (item.min_price == "") {
              this.$messages.error("请输入最低消费区间");
              num++;
              this.activeName = "fourth";
              reject(false);
              return true;
            }
            if (item.max_price == "") {
              this.$messages.error("请输入最大消费区间");
              num++;
              this.activeName = "fourth";
              reject(false);
              return true;
            }
            if (Number(item.min_price) > Number(item.max_price)) {
              this.$messages.error("最大消费区间不得小于最低消费区间");
              num++;
              this.activeName = "fourth";
              reject(false);
              return true;
            }
            if (item.awardProduct.length < this.awardSet.dial_type) {
              this.$messages.error(
                "当前第" +
                  (index + 1) +
                  "项条件配置奖品数量不足" +
                  this.awardSet.dial_type +
                  "个"
              );
              num++;
              this.activeName = "fourth";
              reject(false);
              return true;
            }
            if (item.awardProduct.length > this.awardSet.dial_type) {
              this.$messages.error(
                "当前奖品数量不得大于" + this.awardSet.dial_type + "个"
              );
              num++;
              this.activeName = "fourth";
              reject(false);
              return true;
            }
          });
        }
        if (num == 0) {
          resolve();
        }
      });
      const p5 = new Promise((resolve, reject) => {
        if (this.explain != "") {
          resolve();
        } else {
          if (this.activeName == "fifth") {
            this.$messages.error("请填写活动说明");
          }

          reject();
        }
      });
      Promise.all([p1, p2, p3, p4, p5])
        .then(() => {
          let ranges = JSON.parse(JSON.stringify(this.range));
          ranges.user_black = this.joinblackIds.toString();
          ranges.user_area = ranges.user_area;
          ranges.user_group = ranges.user_group.toString();
          ranges.user_label = ranges.user_label.toString();
          ranges.user_level = ranges.user_level.toString();

          let taskForms = JSON.parse(JSON.stringify(this.taskForm));
          var arr = [];
          if (taskForms.task_type.includes(1)) {
            taskForms.configuration.task_type = 1;
            if (taskForms.configuration.goods_type == 4) {
              var goodIds = [];
              this.goodsIdsRow.forEach((item) => {
                goodIds.push({
                  goods_id: item.id,
                  total_num: item.total_num,
                  gif_num: item.gif_num,
                });
              });
              taskForms.configuration.goods_type_ids = goodIds;
            }
            arr.push(taskForms.configuration);
          }
          if (taskForms.task_type.includes(2)) {
            taskForms.exchange.task_type = 2;
            if (taskForms.exchange.goods_type == 4) {
              var goodIds = [];
              this.exchangegoodsIdsRow.forEach((item) => {
                goodIds.push({
                  goods_id: item.id,
                  total_num: item.total_num,
                  gif_num: item.gif_num,
                });
              });
              taskForms.exchange.goods_type_ids = goodIds;
            }
            arr.push(taskForms.exchange);
          }
          if (taskForms.task_type.includes(3)) {
            taskForms.raffle.task_type = 3;
            arr.push(taskForms.raffle);
          }

          let awardSets = JSON.parse(JSON.stringify(this.awardSet));
          let awardIdsLet = JSON.parse(JSON.stringify(this.awardIds));

          awardSets.consume_limit_goods = awardIdsLet.toString();
          if (awardSets.award_set == 1) {
            awardSets.consume_limit_goods = "";
            awardSets.consume_limit = 1;
          }
          var awardSetObj = {
            ...awardSets,
          };
          var arr1 = [];
          awardSets.award_rule.forEach((item) => {
            item.awardProduct.forEach((items) => {
              items.max_price = item.max_price;
              items.min_price = item.min_price;
            });
            arr1.push([...item.awardProduct]);
          });
          awardSetObj.award_rule = arr1;
          let basics = JSON.parse(JSON.stringify(this.basic));
          let explains = JSON.parse(JSON.stringify(this.explain));
          var obj = {
            id: this.id,
            award: JSON.stringify(basics),
            userConfig: JSON.stringify(ranges),
            awardTask: JSON.stringify(arr),
            awardSet: JSON.stringify(awardSetObj),
            explain: explains,
          };
          this.loading = true;
          NewSaveAward(obj).then((res) => {
            this.loading = false;
            if (res.code !== 200 || res.status !== 1) {
              this.$messages.error(res.msg);
              return;
            }
            this.$messages.success(res.msg);
            this.closedinvitation();
          });
        })
        .catch((obj) => {
          if (obj == false) {
            return false;
          }
          var err = obj.error;
          for (var key in err) {
            this.$messages.error(err[key][0].message);
            break;
          }
          this.activeName = obj.name;
          return false;
        });
    },
    editorclick(e) {
      this.explain = e;
    },
  },
};
</script>
<style lang="scss">
.drawer-layout {
  /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
  .el-drawer__body {
    overflow: auto;
  }

  /*2.隐藏滚动条，太丑了*/
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }

  .el-drawer__header {
    background-color: #409eff;
    color: #ffffff;
    padding: 10px 20px;
    margin-bottom: 10px;
  }

  .el-tabs--card {
    height: calc(100vh - 110px);
    /* overflow-y: auto; */
  }

  .el-tab-pane {
    height: calc(100vh - 110px);
    overflow-y: auto;
  }

  .el-tabs__header {
    padding-left: 50px;
    margin: 0;
  }

  .el-tabs__item {
    padding: 0 40px;
  }

  .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    z-index: 1;
  }

  .el-alert--warning.is-light .el-alert__description {
    color: #c77b04;
    font-size: 14px;
  }

  .form-box-item {
    .el-form-item__label {
      font-size: 14px;
      font-weight: 500;
      // width: 96px;
    }

    .el-input {
      width: 250px;
    }
  }
}
</style>
<style lang="scss" scoped>
.blockquote-box {
  border-left: 4px solid #409eff;
  padding-left: 16px;
  margin: 16px 0;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  font-size: 16px;
}

.form-box {
  margin: 0 20px;

  .form-box-item {
    padding-bottom: 10px;
    padding-right: 20px;
    font-size: 12px;
    color: #4c4c4c;

    .form-tip {
      font-size: 12px;
      color: #4c4c4c;

      .tip-key {
        font-weight: bold;
        text-decoration: underline;
      }
    }

    .form-product {
      display: flex;
      font-size: 12px;
      color: #ee3737;
    }

    .Instructions {
      background: #f6f6f6;
      border-radius: 4px;
      padding: 10px;
    }
  }

  .table-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .table-top-left {
      display: flex;

      div {
        margin-right: 20px;
      }
    }

    .table-top-right {
      display: flex;

      div {
        margin-left: 20px;
      }
    }
  }

  .table-num {
    margin-left: 5px;
    background: #f0f0f0;
    width: 35px;
    border-radius: 5px;
  }
}

.button-box {
  margin-left: 30px;
  margin-bottom: 20px;

  .next-button {
    background-color: #eeeeee;
    color: #4c4c4c;
    height: 30px;
  }
}
</style>
